#include("./layout.html")
#include("./_include.html")
#include("_sidebar.html")
#@layout()

#define script()
<script src="/static/components/jquery/jquery.form.min.js"></script>
<script src="/static/commons/page.js"></script>
<script src="plugin-trace/js/plugin-trace-jquery.eeyellow.Timeline.js"></script>
#@sidebarResource()
#end

#define css()
<link href="/static/commons/page.css" rel="stylesheet">
<link href="plugin-trace/css/plugin-trace-jquery.eeyellow.Timeline.css" rel="stylesheet">
<style>
.comment-form > div > textarea{
    height: auto;
}
</style>
#end

#define content()
<div class="col-md-9 cl-left">

    <div class="cl-artical-content bgo-3">
        <h2 class="cl-artical-title">#(page.title)</h2>
        <div class="cl-card-tag">
            <div><span>#(page.view_count)</span>人浏览</div>
        </div>
        <div class="cl-artical">
            #(page.content)
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
            
                        <div class="VivaTimeline">
                            <dl>
                                #set(dateBefore=null)
                                #set(dateCur=null)
                                
                                #tracePage(pageSize=15)
                                #for(tc: tracePage.list)
                                
                                    #set(dateCur=tc.date.toString().substring(0,tc.date.toString().lastIndexOf('-')))
                                    #if(dateBefore==null || !dateBefore.equals(dateCur))
                                    #set(dateBefore=dateCur)
                                    <dt>#(dateBefore)</dt>
                                    #end    

                                    #if(for.count%2==1)
                                    <dd class="pos-left clearfix">
                                    #else
                                    <dd class="pos-right clearfix">
                                    #end
                                    <div class="circ"></div>
                                    <div class="time">#date(tc.date, 'yyyy-MM-dd')</div>
                                    <div class="events">
                                        <div class="events-header">#(tc.title)</div>
                                        <div class="events-body">
                                            #trace(id=tc.id)
                                            #for(line: lines)
                                            <div class="row">
                                                <div class="col-md-6 pull-left">
                                                    <img class="events-object img-fluid rounded" src="#(line.image)" />
                                                </div>
                                                <div class="events-desc">
                                                    #(line.content)
                                                </div>
                                            </div>
                                            #end
                                            #end
                                        </div>
                                        <div class="events-footer">
                                        </div>
                                    </div>
                                    </dd>
                                #end
                                
                                
                                
                                #end
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    #tracePaginate()
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            #for(page : pages)
            <li class="page-item #(page.style)"><a class="page-link" href='#(page.url.replace("-", "?page="))'>#(page.text)</a></li>
            #end
        </ul>
    </nav>
    #end

   <!-- #@defaultPageCommentPage()-->

</div>

<div class="col-md-3 cl-right">
    #@sidebarContent()

</div>
#end
<script type="text/javascript">
    $(document).ready(function () {
        $('.VivaTimeline').vivaTimeline({
            carousel: true,
            carouselTime: 3000
        });
    });
</script>